<template>
	<div>
		<div class="mask_" v-if="formVisible" @click="reset"></div>
		<div id="category" v-if="formVisible" @click.stop="">
			
			<div class="category">
				<!--{{IDS__}}-->
				<div class="categoryitem">
					<div class="categorylist parent-list" v-for="(item,index) in tableData">
						<div class="top my-flex-between">
							<div class="top_left">
								<input type="checkbox" @click.stop="" :id="'_'+item.id" :data-name="item.name" class="parent-input" :class="[{'value-input':item.children && item.children.length==0}]">
								<label class="first_label" @click.stop="checkAll($event)" :for="'_'+item.id">{{item.name}}</label>
							</div>
						</div>
						<div class="child-list" v-if="item.children && item.children.length>0">
							<div class="centers " v-if="item.children && item.children.length>0 && item.children[0].children &&item.children[0].children.length>0">
								<div class="parent-list centers_one" v-for="(item_,index_) in item.children">
									<div class="center_sub_top my-flex-left">
										<input type="checkbox" name="subcheck_option" @click.stop="" :id="'_'+item_.id" :data-name="item_.name" class="parent-input child-input" :class="[{'value-input':item_.children && item_.children.length==0}]">
										<label @click.stop="checkAll($event)" :for="'_'+item_.id">{{item_.name}}</label>
									</div>
									<div class="child-list my-flex-left" style="flex: 1;flex-wrap: wrap;">
										<template v-for="itemsub_ in item_.children">
											<!--汽油柴油-->
											<template v-if="itemsub_.id==12||itemsub_.id==13">
												<div class="bottoms" v-for="itemsub__ in itemsub_.children">
													<div class="bottom_category my-flex-left">
														<input type="checkbox" name="category_item" @click="checkIsAll" :data-name="itemsub_.name+'/'+itemsub__.name" :id="'_'+itemsub__.id" class="value-input" :value="itemsub__">
														<label :for="'_'+itemsub__.id">{{itemsub_.name}}/{{itemsub__.name}}</label>
														<!--<div class="my_flex_col_center">
														<span :class="[{'small':itemsub_.name.length>4}]">{{itemsub_.name}}/{{itemsub__.name}}</span>
													</div>-->
													</div>
												</div>
											</template>
											<template v-else>
												<div class="bottoms" v-for="itemsub_ in item_.children">
													<div class="bottom_category my-flex-left">
														<input type="checkbox" name="category_item" @click="checkIsAll" :data-name="itemsub_.name" :id="'_'+itemsub_.id" class="value-input" :value="itemsub_">
														<label :for="'_'+itemsub_.id">
														{{itemsub_.name}}
													</label>

														<!--<div class="my-flex-col-center">
														<span :class="[{'small':itemsub_.name.length>4}]">{{itemsub_.name}}</span>
													</div>-->
													</div>
												</div>
											</template>
										</template>

									</div>
								</div>
							</div>
							<div v-else class="bottoms my-flex-left">
								<div class="bottom_category" v-for="(item_,index_) in item.children">
									<input type="checkbox" name="category_item" class="value-input" :data-name="item_.name" @click="checkIsAll" :id="'_'+item_.id" :value="item_">
									<label :for="'_'+item_.id">
									{{item_.name}}
								</label>
									<!--<div class="my-flex-col-center">
									<span>{{item_.name}}</span>
								</div>-->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="ca_footer" class="my-flex-center">
				<div class="footer-btn" @click="reset"><span class="my-flex-center">取消</span></div>
				<div class="footer-btn" @click="confirm"><span class="my-flex-center">确定</span></div>
			</div>
		</div>
	</div>

</template>

<script>
	import $ from 'jquery';
	import service from '@/js/common/customerservice.js';
	export default {
		data() {
			return {
				formVisible: false,
				tableData: [],
				allChecked: false, //全选
				IDS_: [],
				IDS__: []
			}
		},
		props: {
			obj_: {},
			key_: '',
			params: {},
			btnshow: {
				show: ''
			},
			oriproductCategoryIds: ''
		},
		watch: {},
		mounted() {
			this.getCategoryTree();
			for(let i of $('.updown')) {
				i.style.transform = 'rotate(0deg)';
			}
		},
		methods: {
			...service,
			checkAll(e) {
				let dom = this.tool.getTargetDom($(e.target), 'parent-list');
				let parent_dom = dom.find('.parent-input')[0];
				for(let item of dom.find('.child-list .value-input')) {
					item.checked = !parent_dom.checked;
				}
				for(let item of dom.find('.child-list .child-input')) {
					item.checked = !parent_dom.checked;
				}
				this.checkIsAll();
			},
			checkIsAll() {
				setTimeout(() => {
					for(let item of $('.categoryitem .parent-input.child-input')) {
						let dom = this.tool.getTargetDom($(item), 'parent-list');
						let tag = true;
						for(let item_ of dom.find('.child-list .value-input')) {
							if(!item_.checked) {
								item.checked = false;
								tag = false;
								break;
							}
						}
						for(let item_ of dom.find('.child-list .child-input')) {
							if(!item_.checked) {
								item.checked = false;
								tag = false;
								break;
							}
						}
						if(dom.find('.child-list .value-input').length > 0) {
							if(tag == true) {
								item.checked = true;
							}
						}

					}
				}, 10)
				setTimeout(() => {
					for(let item of $('.categoryitem .parent-input')) {
						let dom = this.tool.getTargetDom($(item), 'parent-list');
						let tag = true;
						for(let item_ of dom.find('.child-list .value-input')) {
							if(!item_.checked) {
								item.checked = false;
								tag = false;
								break;
							}
						}
						for(let item_ of dom.find('.child-list .child-input')) {
							if(!item_.checked) {
								item.checked = false;
								tag = false;
								break;
							}
						}
						if(dom.find('.child-list .value-input').length > 0) {
							if(tag == true) {
								item.checked = true;
							}
						}

					}
				}, 30)
			},
			confirm() {
				let arr = []
				let arr_name = []
				for(let item of $('#category .category').find('.value-input')) {
					if(item.checked) {
						arr.push($(item).attr('id').replace('_', ''))
						arr_name.push($(item).attr('data-name'))
					}
				}
				this.params[this.key_] = arr.join(',');
				this.obj_.productCategoryNames = arr_name.join(',');
				this.obj_.productCategoryIdsCN = arr_name.join(',');
				console.log(this.params[this.key_])
				this.close();
			},
			resetValue() {
				console.log(this.params[this.key_])
				if(this.params[this.key_]) {
					let arr = this.params[this.key_].split(',');
					setTimeout(() => {
						for(let item of arr) {
							let query = '#_' + item;
							//							console.log(query)
							if(item && $(query) && $(query)[0]) {
								$(query)[0].checked = true;
							}
						}
						setTimeout(() => {
							this.checkIsAll();
						}, 100)
					}, 100)
				}

			},
			expandCont(ev) {
				console.log(ev)
				let dom = this.tool.getTargetDom($(ev.target), 'top');
				if(dom.next('div').css('display') == 'block') {
					dom.next('div').slideUp();
					$(dom).find('.updown')[0].style.transform = 'rotate(180deg)';
				} else {
					dom.next('div').slideDown();
					$(dom).find('.updown')[0].style.transform = 'rotate(0)';
				}
			},
			show() {
				this.formVisible = true;
				this.resetValue();

			},
			close() {
				this.formVisible = false;
			},
			reset() {
				this.$emit('confirm');
				this.close();
			},
		}
	}
</script>

<style src="../../less/page/common/category.less" lang="less"></style>